<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>业务员管理</title>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">

  <!-- 日期选择器引入依赖 -->
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/style.css" />
  <style>
    .case {
      margin-top: 2px
    }

    .ECalendar {
      width: 200px;
      height: 35px;
    }
  </style>

  <!-- 引入分页依赖 -->
  <link rel="stylesheet" href="../../plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="../../plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  <link type="text/css" rel="stylesheet" charset="UTF-8"
    href="https://translate.googleapis.com/translate_static/css/translateelement.css">

  <!-- vue+axios -->
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>

<!--
`body` tag options:

  Apply one or more of the following classes to to the body tag
  to get the desired effect

  * sidebar-collapse
  * sidebar-mini
-->

<body class="hold-transition sidebar-mini">
  <div class="wrapper">

    <div id="add">
      <!-- Content Header (Page header) -->
      <div class="content-header">
        <div style="background-color: antiquewhite; margin-left: 1%; margin-right: 1%;">
          <nav class=" navbar navbar-expand navbar-white navbar-light">
            <ul class="navbar-nav nav-sidebar col-sm-6">

              <li class="nav-item d-none d-sm-inline-block"><a href="#" class="nav-link" data-toggle="modal"
                  data-target="#exampleModal">
                  <i class="fas fa-plus nav-icon"></i>
                  <p>新增业务员</p>
                </a> <!-- 新增业务员 -->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                  aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">新增业务员</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">业务员名称：</label>
                          <div class="col-sm-8">
                            <input type="text" class="form-control" v-model="newcname">
                          </div>
                          <div class="col-sm-1"></div>
                        </div>
                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">统一信用代码：</label>
                          <div class="col-sm-8">
                            <input type="text" class="form-control" v-model="newcnumber">
                          </div>
                          <div class="col-sm-1"></div>
                        </div>
                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">状态：</label>
                          <div class="col-sm-8">
                            <select class="selectpicker show-tick form-control" v-model="newstatus">
                              <option disabled value="">请选择:0已禁用,1已启用</option>
                              <option>0</option>
                              <option>1</option>
                            </select>
                          </div>
                          <div class="col-sm-1"></div>
                        </div>
                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">简称：</label>
                          <div class="col-sm-8">
                            <input type="text" class="form-control" v-model="newcsname">
                          </div>
                          <div class="col-sm-1"></div>
                        </div>
                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">代号：</label>
                          <div class="col-sm-8">
                            <input type="text" class="form-control" v-model="newccodename">
                          </div>
                          <div class="col-sm-1"></div>
                        </div>
                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">编码：</label>
                          <div class="col-sm-8">
                            <input type="text" class="form-control" v-model="newccoding">
                          </div>
                          <div class="col-sm-1"></div>
                        </div>
                        <div class="form-group row">
                          <label class="col-sm-3 col-form-label">区域：</label>
                          <div class="col-sm-8">
                            <input type="text" class="form-control" v-model="newcarea">
                          </div>
                          <div class="col-sm-1"></div>
                        </div>

                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" @click="submit()">提交</button>
                      </div>
                    </div>
                  </div>
                </div> <!-- 新增业务员 -->
              </li>
            </ul>
            <!-- <ul class="navbar-nav nav-sidebar col-sm-2">
              <div class="btn-group btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-primary">
                  <input type="radio" name="options" id="option1" autocomplete="off" checked=""> 全部
                </label>
                <label class="btn btn-primary">
                  <input type="radio" name="options" id="option2" autocomplete="off"> 启用
                </label>
                <label class="btn btn-primary active">
                  <input type="radio" name="options" id="option3" autocomplete="off"> 禁用
                </label>
              </div>
            </ul>
            <ul class="navbar-nav nav-sidebar col-sm-3">

              <input type="text" placeholder="请输入入库单号" />
              <button class="btn btn-primary">搜索</button>
            </ul> -->

          </nav>

        </div>

      </div>

      <div class="content-body">
        <div style="background-color: antiquewhite; margin-left: 1%; margin-right: 1%;">

          <!-- 前前 -->
          <div class="card">

            <!-- /.card-header -->
            <div class="card-body">
              <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
                <div class="row">
                  <div class="col-sm-12">
                    <table id="example1" class="table table-bordered table-striped dataTable dtr-inline" role="grid"
                      aria-describedby="example1_info">
                      <thead>
                        <tr role="row">
                          <th class="sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">操作</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">业务员名称</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">统一信用代码</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">状态</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">简称</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">代号</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">编码</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">区域</th>
                          <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1">添加日期</th>
                        </tr>
                      </thead>
                      <tbody>
                      <tr role="row" class="odd" style="display: none;">
                              <td class="" tabindex="0">Gecko</td>
                              <td style="">Epiphany 2.20</td>
                              <td style="">Gnome</td>
                              <td style="">Epiphany 2.20</td>
                              <td style="">Gnome</td>
                              <td style="">Epiphany 2.20</td>
                              <td style="">Gnome</td>
                              <td style="">Gnome</td>
                              <td  style="">1.8</td>
                       </tr>
                        <tr v-for="salesman in salesmans">
                          <td>
                            <a href="#" data-toggle="modal" data-target="#exampleModal_xianqin"
                              @click="showSalesmans(salesman.sid)"> <i class="nav-icon far fa-list-alt"></i>
                            </a> |
                            <a href="#" data-toggle="modal" data-target="#exampleModal_xiugai"
                              @click="showSalesmans(salesman.sid)"> <i class="nav-icon far fa-edit"></i>
                            </a>
                            </a> |
                            <a href="#" data-toggle="modal" @click="deleteSalesman(salesman.sid)"> <i
                                class="nav-icon fas fa-trash"></i>
                            </a>
                            <!-- 查看当前列数据 -->
                            <div class="modal fade" id="exampleModal_xianqin" tabindex="-1" role="dialog"
                              aria-labelledby="exampleModalLabel" aria-hidden="true">
                              <div class="modal-dialog">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">业务员详情
                                    </h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">&times;</span>
                                    </button>
                                  </div>
                                  <div class="modal-body">
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">业务员名称：</label>
                                      <div class="col-sm-7">
                                        {{rowSalesman.sname}}
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">统一信用代码：</label>
                                      <div class="col-sm-7">
                                        {{rowSalesman.cnumber}}
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">状态：</label>
                                      <div class="col-sm-7">
                                        <div v-if="rowSalesman.status == 1">
                                          <span style="font-size: 13px; color: #00A854;">●</span>已启用
                                        </div>
                                        <div v-else>
                                          <span style="font-size: 13px; color: #FFBF00;">●</span>已禁用
                                        </div>
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">简称：</label>
                                      <div class="col-sm-7">
                                        {{rowSalesman.csname}}
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">代号：</label>
                                      <div class="col-sm-7">
                                        {{rowSalesman.ccodename}}
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">编码：</label>
                                      <div class="col-sm-7">
                                        {{rowSalesman.ccoding}}
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">区域：</label>
                                      <div class="col-sm-7">
                                        {{rowSalesman.carea}}
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>

                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!-- 查看当前列数据 -->
                            <div class="modal fade" id="exampleModal_xiugai" tabindex="-1" role="dialog"
                              aria-labelledby="exampleModalLabel" aria-hidden="true">
                              <div class="modal-dialog">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">修改详情
                                    </h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">&times;</span>
                                    </button>
                                  </div>
                                  <div class="modal-body">
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">业务员名称：</label>
                                      <div class="col-sm-7">
                                        <input type="text" class="form-control" v-model="sname">
                                        </h5>
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">统一信用代码：</label>
                                      <div class="col-sm-7">
                                        <input type="text" class="form-control" v-model="cnumber">
                                        </h5>
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">状态：</label>
                                      <div class="col-sm-7">
                                        <select class="selectpicker show-tick form-control" v-model="status">
                                          <option disabled value="">请选择:0上架,1下架</option>
                                          <option>0</option>
                                          <option>1</option>
                                        </select>
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">简称：</label>
                                      <div class="col-sm-7">
                                        <input type="text" class="form-control" v-model="csname">
                                        </h5>
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">代号：</label>
                                      <div class="col-sm-7">
                                        <input type="text" class="form-control" v-model="ccodename">
                                        </h5>
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">编码：</label>
                                      <div class="col-sm-7">
                                        <input type="text" class="form-control" v-model="ccoding">
                                        </h5>
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>
                                    <div class="form-group row">
                                      <label class="col-sm-4 col-form-label">区域：</label>
                                      <div class="col-sm-7">
                                        <input type="text" class="form-control" v-model="carea">
                                        </h5>
                                      </div>
                                      <div class="col-sm-1"></div>
                                    </div>

                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary"
                                      @click="modify(rowSalesman.sid)">确定修改</button>
                                  </div>
                                </div>
                              </div>
                            </div>

                          </td>
                          <td>{{salesman.sname}}</td>
                          <td>{{salesman.cnumber}}</td>
                          <td>
                            <div v-if="salesman.status == 1">
                              <span style="font-size: 13px; color: #00A854;">●</span>已启用
                            </div>
                            <div v-else>
                              <span style="font-size: 13px; color: #FFBF00;">●</span>已禁用
                            </div>
                          </td>
                          <td>{{salesman.csname}}</td>
                          <td>{{salesman.ccodename}}</td>
                          <td>{{salesman.ccoding}}</td>
                          <td>{{salesman.carea}}</td>
                          <td>{{salesman.addtime}}</td>
                        </tr>
                      </tbody>
                      <tfoot>
                        <tr>
                          <th rowspan="1" colspan="1">操作</th>
                          <th rowspan="1" colspan="1">业务员名称</th>
                          <th rowspan="1" colspan="1">统一信用代码</th>
                          <th rowspan="1" colspan="1">状态</th>
                          <th rowspan="1" colspan="1">简称</th>
                          <th rowspan="1" colspan="1">代号</th>
                          <th rowspan="1" colspan="1">编码</th>
                          <th rowspan="1" colspan="1">区域</th>
                          <th rowspan="1" colspan="1">添加日期</th>
                        </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.card-body -->
          </div>

        </div>
      </div>

    </div>
    <script type="text/javascript">
      new Vue({
        el: "#add",
        data: {
          salesmans: [],
          rowSalesman: [],

          sname: "",
          status: 1,
          cnumber: "",
          csname: "",
          ccodename: "",
          ccoding: "",
          carea: "",

          newcname: "",
          newstatus: 1,
          newcnumber: "",
          newcsname: "",
          newccodename: "",
          newccoding: "",
          newcarea: "",
        },

        mounted() {
          axios
            .get('/salesman/all/')
            .then(res => {
              console.info(res.data);
              this.salesmans = res.data;
            })
        },

        methods: {
          //新增业务员
          submit: function () {
            //alert("123321");
            axios
              .get("/salesman/addsalesman", {
                params: {
                  sname: this.newcname,
                  status: this.newstatus,
                  cnumber: this.newcnumber,
                  csname: this.newcsname,
                  ccodename: this.newccodename,
                  ccoding: this.newccoding,
                  carea: this.newcarea,
                }
              })
              .then(res => {
                alert(res.data.message);
                window.location.href = "salesman_management.html";
              })
          },

          //通过sid查询当条数据 
          showSalesmans: function (sid) {
            //alert(sid);
            axios
              .get("/salesman/searchData", {
                params: {
                  sid: sid
                }
              })
              .then(res => {
                console.info(res.data);
                this.rowSalesman = res.data;
              })
          },

          //修改数据
          modify: function (sid) {
            axios
              .get("/salesman/modifySalesman", {
                params: {
                  sid: sid,
                  sname: this.sname,
                  cnumber: this.cnumber,
                  status: this.status,
                  csname: this.csname,
                  ccodename: this.ccodename,
                  ccoding: this.ccoding,
                  carea: this.carea,
                }
              })
              .then(res => {
                alert(res.data.message);
                window.location.href = "salesman_management.html";
              })
          },

          //通过sid删除商品数据
          deleteSalesman: function (sid) {
            //alert(sid);
            axios
              .get("/salesman/deleteSalesman", {
                params: {
                  sid: sid,
                }
              })
              .then(res => {
                alert(res.data.message);
                window.location.href = "salesman_management.html";
              })
          },
        }

      });
    </script>

  </div>
  <!-- ./wrapper -->

  <!-- REQUIRED SCRIPTS -->

  <!-- jQuery -->
  <script src="../../plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE -->
  <script src="../../dist/js/adminlte.js"></script>

  <!-- OPTIONAL SCRIPTS -->
  <script src="../../plugins/chart.js/Chart.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="../../dist/js/demo.js"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <script src="../../dist/js/pages/dashboard3.js"></script>

  <!-- 日期选择器 -->
  <script src="js/jquery.min.js"></script>
  <script src="js/Ecalendar.jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#ECalendar_case1").ECalendar({
        type: "date",
        skin: "#233",
        offset: [0, 2]
      });
    })
  </script>

  <!-- 引入分页依赖 -->
  <script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
  <script src="../../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
  <script src="../../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
  <script src="../../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
  <script src="../../dist/js/adminlte.min.js"></script>
  <script>
    $(function () {
      $("#example1").DataTable({
        "responsive": true,
        "autoWidth": false,
      });
      $('#example2').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
      });
    });
  </script>
</body>

</html>